<template>
	<view class="all-content">
		<view class="search-box">
			<!-- 自定义导航栏 -->
			<!-- :isBack="ture显示左侧返回按钮" :isRightBtn="true"显示右侧设置按钮 -->
			<navtab :isBack="false" :isRightBtn="true" @click="favoritesPopup = true" @rightBtn="openMask">
				<template slot="title">
					<text class="title-name">贵州</text>
					<!-- <text class="cuIcon-unfold" /> -->
				</template>
				<template slot="right-btn">
					<u-icon name="more-dot-fill"></u-icon>
					<!-- <text class="cuIcon-roundadd" /> -->
				</template>
			</navtab>
			<u-line margin="20rpx 0 0 0"></u-line>
			<!-- 正文内容 -->
			<view class="content">
				<!-- 方案菜单栏-->
				<u-tabs :list="schemeList" lineWidth="30" lineColor="#409EFF" :activeStyle="{
			            color: '#409EFF',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
					<!-- 选择方案 -->
					<view slot="right" style="padding-left: 4px;padding-right: 4px;" @tap="selectSchemeList">
						<u-icon name="grid" size="50" bold></u-icon>
					</view>
				</u-tabs>
				<!-- 分割线 -->
				<u-line margin="20rpx 0 0 0"></u-line>
				<!-- 属性选择 -->
				<view class="attribute-all">
					<!-- 日期选择 -->
					<view :class='attributeData== 1 ? "select-attribute":"select-attribute-active"' @click="selectData">
						<text>3天</text>
						<u-icon name="arrow-up"></u-icon>
					</view>
					<!-- 来源选择 -->
					<view :class='attributeSource== 1 ? "select-attribute":"select-attribute-active"'
						@click="selectSource">
						<text>来源</text>
						<u-icon name="arrow-up"></u-icon>
					</view>
					<!-- 敏感属性选择 -->
					<view :class='attributeNature== 1 ? "select-attribute":"select-attribute-active"'
						@click="selectNature">
						<text>属性</text>
						<u-icon name="arrow-up"></u-icon>
					</view>
					<!-- 筛选选择 -->
					<view :class='attributeScreen== 1 ? "select-attribute":"select-attribute-active"'
						@click="selectScreen">
						<text>筛选</text>
						<u-icon name="pushpin"></u-icon>
					</view>
				</view>
				<!-- 分割线 -->
				<u-line margin="20rpx 0 20rpx 0 "></u-line>
				<!-- 总信息展示 -->
				<view class="info-all">
					<!-- 左侧总信息 -->
					<view class="all-num">
						<text class="all-num-text">总信息:</text>
						<view class="">
							<text>80</text>
							<text>条</text>
						</view>
					</view>
					<!-- 敏感条数 -->
					<view class="all-num">
						<text class="all-num-text">敏感:</text>
						<view>
							<text>80</text>
							<text>条</text>
						</view>
					</view>
					<!-- 点击跳转到图表分析的图标 -->
					<view class="">
						<u-icon name="pause" size="40"></u-icon>
					</view>
				</view>
				<!-- 分割线 -->
				<u-line margin="20rpx 0  20rpx 0 "></u-line>
				<!-- 数据信息页面 -->
			</view>
		</view>

		<!-- 数据展示区域 -->
		<view class="swiper-item">
			<!-- 滚动区域 -->
			<scroll-view scroll-y 　:style="{height:scrollHeight}" lower-threshold="50" class="swiper-item-scroll"
				:scroll-top="scrollTop" @scroll="scroll">
				<view class="box-conetnt" v-for="item in 10">
					<!-- 标题 -->
					<view class="box-conetnt-title">
						<!-- 敏感信息分类 -->
						<view class="sensitive-btn-set">
							<!-- 在data中动态绑定text和type的值，获取数据的时候赋值 -->
							<u-tag text="非敏感" size="mini" type="primary" ></u-tag>
						</view>
						<!-- 标题内容 -->
						<text class="sensitive-text-set">贵州出台数据致辞中小就业发展，贵州出台数据致辞中小就业发展贵州出台</text>
					</view>
					
					
					<!-- 内容 -->
					<view class="box-conetnt-text">
						<text>日前，国家总局，市场监督局、国家药具。国家知识局限。特效日前，国家总局，市场监督局、国家药具。国家知识局限。国家总局，市场监督局、国家药具。国家知识局限国家总局</text>
					</view>
					<!-- 关键词 -->
					<view class="box-conetnt-involve">
						<text>涉及词：</text>
						<text>国家盐焗</text>
					</view>
					<!-- 时间 -->
					<view class="box-conetnt-data">
						<text>2021年6月16日</text>
					</view>
					<!-- 作者 -->
					<view class="author">
						<!-- 左侧 -->
						<view class="author-left">
							<!-- 头像 -->
							<u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
							<text>作者名字</text>
						</view>
						<!-- 右侧 -->
						<view class="author-right" @click="showSetInfo = true">
							<!-- 底部弹出层设置敏感属性 -->
							<u-icon name="more-dot-fill" size="40"></u-icon>
						</view>
					</view>
					<u-line margin="20rpx 0 20rpx 0"></u-line>
				</view>


			</scroll-view>
		</view>
		<!-- 返回顶部按钮 -->
		<view class="gotoTOP-icon">
			<u-icon name="arrow-up-fill" color="#2979ff" size="80" @click="goTop"></u-icon>
		</view>
		<!-- 搜索 -->
		<view class="gotoTOP-icon-search">
			<uni-icons type="search" size="30"></uni-icons>
		</view>


		<!-- 日期选择弹出框 -->
		<u-modal :show="showData" :closeOnClickOverlay="true" @close='closeData' :showConfirmButton="false"
			negativeTop="300rpx">
			<!-- 被选择的日期 -->
			<view class="item-data-data">
				<view class="item-data" v-for="(item, index) in dataTypeList" :key="index">
					<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectDataType(item)">
					</u-tag>
				</view>
			</view>
		</u-modal>
		<!-- 来源选择弹出框 -->
		<u-modal :show="showSource" :closeOnClickOverlay="true" @close='closeSource' :showCancelButton="true"
			cancelText="重置" negativeTop="10rpx">
			<!-- 被选择的来源 -->
			<view>
				<u-checkbox-group v-model="checkSource" placement="column" @change="checkSourceChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkSourceList "
						:key="index" :label="item.name" :name="item.name" activeColor="#409EFF" size="38" labelSize="38"
						iconSize="38">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 选择来源的数量 -->
			<view class="Source-num">
				<text>60</text>
				<text>60</text>
				<text>60</text>
				<text class="Source-num-item">60</text>
				<text>60</text>
				<text>60</text>
				<text class="Source-num-item">60</text>
				<text>60</text>
				<text>60</text>
				<text class="Source-num-item">60</text>
			</view>
		</u-modal>
		<!-- 敏感属性选择弹出框 -->
		<u-modal :show="showNature" :closeOnClickOverlay="true" @close='closeNature' :showCancelButton="true"
			cancelText="重置" negativeTop="300rpx">
			<!-- 可以选择的属性 -->
			<u-checkbox-group v-model="checkNature" placement="column" @change="checkNatureChange"
				class="select-nature">
				<!-- 标题 -->
				<view class="nature-title">
					<text style="font-weight: bold;">敏感属性</text>
					<text>(多选)</text>
				</view>
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkNatureList" :key="index"
					:label="item.name" :name="item.name" activeColor="#409EFF" size="38" labelSize="38" iconSize="38">
				</u-checkbox>
			</u-checkbox-group>
		</u-modal>
		<!-- 筛选弹出框 -->
		<u-popup :show="showScreen" mode="right" @close="closeScreen" :safeAreaInsetTop="true">
			<!-- 信息排序 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">信息排序</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in infoList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectInfo(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 信息类型 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">信息类型</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in infoTypeList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectInfoType(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 匹配方式 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">匹配方式</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in mateTypeList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectMateType(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 排序方式 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">排序方式</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in sortTypeList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectSortType(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 定向信源 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">定向信源</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in directionalTypeList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index"
							@click="selectDirectionalType(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 排除词开关 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">排除词</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in excludeList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectExcludeList(item)">
						</u-tag>
					</view>
				</view>
			</view>
			<!-- 字距设置 -->
			<view class="Screen-body">
				<view class="info-title">
					<text class="info-title-left">字距</text>
					<text class="info-title-right">(单选)</text>
				</view>
				<view class="info-select">
					<view class="u-page__tag-item" v-for="(item, index) in trackingList" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectTracking(item)">
						</u-tag>
					</view>
				</view>
			</view>

		</u-popup>
		<!-- 底部弹出设置敏感信息按钮 -->
		<u-popup :show="showSetInfo" @close="closeSetInfo">
			<view class="showSetInfo-down">
				<!-- 修改设置敏感信息 -->
				<!-- 匹配方式 -->
				<view class="Screen-body showSetInfo-up">
					<view class="info-title">
						<text class="info-title-left">敏感属性</text>
						<text class="info-title-right">(选择后修改信息属性)</text>
					</view>
					<view class="info-select">
						<view class="u-page__tag-item" v-for="(item, index) in changeInfoList" :key="index">
							<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="selectChangeInfo(item)">
							</u-tag>
						</view>
					</view>
				</view>
				<!-- 分割线条 -->
				<u-line></u-line>
				<!-- 查看原文一键复制功能 -->
				<view class="Screen-body-attribute">
					<view class="info-select-attribute" >
						<u-tag text="查看原文" size="large" icon="file-text" plain  ></u-tag>

					</view>
					<view class="info-select-attribute" >
						<u-tag text="标为已读" size="large" icon="eye" plain ></u-tag>
					</view>
					<view class="info-select-attribute" >
						<u-tag text="一键复制" size="large" icon="coupon" plain ></u-tag>
					</view>
					<view class="info-select-attribute" >
						<u-tag text="加入收藏" size="large" icon="bookmark" plain ></u-tag>
					</view>
					<view class="info-select-attribute" >
						<u-tag text="拷贝地址" size="large" icon="attach" plain ></u-tag>
					</view>
				</view>
				<!-- 分割线 -->
				<!-- 取消按钮 -->
				<view class="cancel-btn">
					<u-button text="取消" type="primary" size="large" ></u-button>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ownNavBar from '@/components/own/own-nav-bar.vue'
	export default {
		components:{ ownNavBar},
		data() {
			return {
				// 数据区域绑定的滚动高度值
				scrollHeight: 0,
				// 返回顶部设置的值
				scrollTop: 0,
				oldScrollTop: 0,
				// 返回顶部按钮的隐藏
				topState: false,
				// 导航栏状态背景颜色
				bgColor: '#fff;',
				// 顶部标题方案
				title: '贵州',
				// 方案菜单栏
				schemeList: [{
					name: '关注',
				}, {
					name: '推荐',
				}],
				// 选择日期的颜色值
				attributeData: 1,
				// 选择来源的颜色值
				attributeSource: 1,
				// 选择属性的颜色值
				attributeNature: 1,
				// 选择筛选的颜色值
				attributeScreen: 1,
				// 选择日期弹出框
				showData: false,
				// 选择来源的弹出框
				showSource: false,
				// 选择属性的弹出框
				showNature: false,
				// 选择筛选的弹出框
				showScreen: false,
				// 来源选择
				checkSource: [],
				// 选择的日期的数组

				// 基本案列数据
				checkSourceList: [{
						name: '全选',
						disabled: false
					},
					{
						name: '新闻',
						disabled: false
					},
					{
						name: '平媒',
						disabled: false
					},
					{
						name: 'APP',
						disabled: false
					}, {
						name: '视频',
						disabled: false
					}, {
						name: '论坛',
						disabled: false
					}, {
						name: '博客',
						disabled: false
					}, {
						name: '微博',
						disabled: false
					}, {
						name: '微信',
						disabled: false
					},
					{
						name: '短视频',
						disabled: false
					},
				],
				// 可以选择的属性
				checkNature: [],
				// 基本案列数据
				checkNatureList: [{
						name: '全部',
						disabled: false
					},
					{
						name: '敏感',
						disabled: false
					},
					{
						name: '中性',
						disabled: false
					},
					{
						name: '非敏感',
						disabled: false
					}
				],
				// 信息排序
				infoList: [{
						name: "采集时间",
						checked: true
					},
					{
						name: "发布时间",
						checked: false
					},
					{
						name: "评论数",
						checked: false
					},
					{
						name: "转发数",
						checked: false
					},
					{
						name: "点赞数",
						checked: false
					}
				],
				// 信息类型
				// 信息排序
				infoTypeList: [{
						name: "全部",
						checked: true
					},
					{
						name: "原创",
						checked: false
					},
					{
						name: "转发",
						checked: false
					},
					{
						name: "评论",
						checked: false
					}
				],
				// 选择日期
				dataTypeList: [{
						name: "24小时",
						checked: true
					},
					{
						name: "2天",
						checked: false
					},
					{
						name: "3天",
						checked: false
					},
					{
						name: "7天",
						checked: false
					},
					{
						name: "自定义",
						checked: false
					}
				],
				// 匹配方式
				mateTypeList: [{
						name: "按全文",
						checked: true
					},
					{
						name: "按标题",
						checked: false
					},
					{
						name: "按正文",
						checked: false
					}

				],
				// 排序方式
				sortTypeList: [{
						name: "降序",
						checked: true
					},
					{
						name: "升序",
						checked: false
					}
				],
				// 定向信源
				directionalTypeList: [{
						name: "全部",
						checked: true
					},
					{
						name: "定向信源",
						checked: false
					},
				],
				//排除词
				excludeList: [{
						name: "关闭",
						checked: true
					},
					{
						name: "打开",
						checked: false
					},
				],
				//字距
				trackingList: [{
						name: "关闭",
						checked: true
					},
					{
						name: "打开",
						checked: false
					},
				],
				// 底部弹出框设置敏感信息
				showSetInfo: false,
				//选择后修改信息属性
				changeInfoList: [{
						name: "敏感",
						checked: true
					},
					{
						name: "中性",
						checked: false
					},
					{
						name: "非敏感",
						checked: false
					},
				],
			};
		},
		onReady() {
			// 计算数据区域滚动高度
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery()
					query.select('.swiper-item').boundingClientRect()
					query.exec(res => {
						// 把这个值复制给滚动标签的高度
						this.scrollHeight = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', this.scrollHeight);
					})
				}
			})
		},
		// 页面滚动
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {

			scroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			// 返回顶部按钮
			goTop(e) {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},

			// 点击右侧选择方案
			selectSchemeList() {
				console.log('点击了选择方案');
			},
			// 选择日期

			selectData(name) {
				console.log('点击了选择日期');
				if (this.attributeData == 1) {
					this.attributeData = 0
				} else {
					this.attributeData = 1
				}
				this.showData = true
				console.log(name);
				this.dataItemList.map(item => {
					item.checked = item.name === name.name ? true : false
				})

			},
			// 选择来源
			selectSource() {
				if (this.attributeSource == 1) {
					this.attributeSource = 0
				} else {
					this.attributeSource = 1
				}
				this.showSource = true
			},
			// 选择属性
			selectNature() {
				if (this.attributeNature == 1) {
					this.attributeNature = 0
				} else {
					this.attributeNature = 1
				}
				this.showNature = true
			},
			// 选择筛选
			selectScreen() {
				if (this.attributeScreen == 1) {
					this.attributeScreen = 0
				} else {
					this.attributeScreen = 1
				}
				this.showScreen = true
			},
			// 关闭日期弹框
			closeData() {
				this.showData = false
				if (this.attributeData == 1) {
					this.attributeData = 0
				} else {
					this.attributeData = 1
				}
				// console.log('close');
			},
			// 选择日期点击事件
			selectDataListItem(item) {
				console.log(item);
			},
			// 关闭来源弹框
			closeSource() {
				this.showSource = false
				if (this.attributeSource == 1) {
					this.attributeSource = 0
				} else {
					this.attributeSource = 1
				}
			},
			// 选择来源的点击事件
			checkSourceChange(n) {
				console.log('change', n);
			},
			// 关闭选择属性弹出框
			closeNature() {
				this.showNature = false
				if (this.attributeNature == 1) {
					this.attributeNature = 0
				} else {
					this.attributeNature = 1
				}
			},
			// 选择的弹出框属性
			checkNatureChange(n) {
				console.log('change', n);
			},
			// 关闭筛选弹出框
			closeScreen() {
				this.showScreen = false
			},
			// 信息排序选择
			selectInfo(name) {
				console.log(name);
				this.infoList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 信息类型的选择
			selectInfoType(name) {
				console.log(name);
				this.infoTypeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 日期的选择
			selectDataType(name) {
				console.log(name);
				this.dataTypeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 匹配方式的选择
			selectMateType(name) {
				console.log(name);
				this.mateTypeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 排序方式的选择
			selectSortType(name) {
				console.log(name);
				this.sortTypeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 定向信源是否开启
			selectDirectionalType(name) {
				console.log(name);
				this.directionalTypeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 排除词是否开启
			selectExcludeList(name) {
				console.log(name);
				this.excludeList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 字距是否开启
			selectTracking(name) {
				console.log(name);
				this.trackingList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
			},
			// 关闭底部设置信息弹出框
			closeSetInfo() {
				this.showSetInfo = false
			},
			// 选择后修改敏感属性
			selectChangeInfo(name) {
				console.log(name);
				this.changeInfoList.map(item => {
					item.checked = item.name === name.name ? true : false
				})
				// 选择完关闭弹框
				this.showSetInfo = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: sticky;
		// margin-top: 44px;
		z-index: 999;

		// 属性选择
		.attribute-all {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			margin-top: 5px;

			.select-attribute {
				display: flex;

				text {
					font-size: 14px;
					margin-right: 2px;
				}
			}

			.select-attribute-active {
				display: flex;
				color: #409EFF;

				text {
					font-size: 14px;
					margin-right: 2px;
				}
			}
		}
	}

	// 日期选择弹出框
	.datalist-select {
		display: flex;
		flex-direction: column;
		text-align: center;

		text {
			width: 200px;
			border: 1px solid #333333;
			margin: 5px;
		}
	}

	// 选择来源数量弹框
	.Source-num {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-bottom: 30px;
		align-items: center;
		margin-top: -2px;
		font-size: 20px;

		.Source-num-item {
			margin-top: 3px;
		}
	}

	// 敏感属性选择弹出框标题

	.nature-title {
		padding-bottom: 20px;

	}

	.u-page__tag-item {
		margin-right: 20px;
		// width: 80px;

		padding: 5px 0;
		display: flex;
		text-align: center;
		align-items: center;
	}

	.item-data {
		display: flex;
		justify-content: center;
		margin: 5px;

	}

	.item-data-data {
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;

	}

	.Screen-body {
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		width: 320px;

		text {
			margin-left: 10px;
		}
	}

	.info-select {
		display: flex;
		flex-wrap: wrap;
		margin-left: 10px;
		text-align: center;
		align-items: center;
	}


	.info-title {
		display: flex;
		align-items: center;
	}

	.info-title-right {
		font-size: 14px
	}

	.line-bottom {
		border-bottom: 1px solid #DDDDDD;
		margin: 5px 0;
	}

	.info-all {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		font-size: 14px;
	}

	.all-num {
		display: flex;
		align-items: center;

		.all-num-text {
			color: #888888;
		}
	}

	.scroll-body {
		background-color: red;
		z-index: -999;
		// position: relative;
		// height: 800px;

	}

	.box-conetnt {
		padding: 0 15px;
		
		.box-conetnt-title {
			font-weight: bold;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			
			
			
		}
		.sensitive-text-set {
			text-indent:4em;
			display: flex;
			flex-wrap: wrap;
			line-height: 24px;
		}

		.box-conetnt-text {
			color: #888888;
		}

		.box-conetnt-involve {
			margin-top: 5px;
			font-size: 14px;
			color: #888888;
		}

		.box-conetnt-data {
			color: #888888;
			font-size: 14px;
		}
	}

	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.author {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		padding: 0 5px;

		.author-left {
			display: flex;

			text {
				margin-left: 10px;
			}
		}
	}

	.gotoTOP-icon {
		position: absolute;
		// top: 600px;
		bottom: 30px;
		right: 15px;
	}

	.gotoTOP-icon-search {
		position: absolute;
		// top: 650px;
		bottom: 80px;
		right: 23px;
		border-radius: 20px;
		background-color: #409EFF;
	}
	.showSetInfo-up {
		margin-top: 20px;
		padding: 0 0 0 40px;
		margin-top: 20px;
		
	}
	.Screen-body-attribute {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: flex-start;
		// justify-content: center;
		// margin-left: 10px;
		padding: 0 0 0 40px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.info-select-attribute {
		margin: 5px;
		font-size: 30px
	}
	
	.showSetInfo-down {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.sensitive-btn-set {
		width: 50px;
		position: absolute;
		
		
	}
	.title-name {
		font-size: 14px
	}


</style>
